<template>
  <div class="recruit">
    <BannerImg url="recruit/banner.jpg"></BannerImg>
    <Row class="floorW">
      <Col>
        <Card :bordered="false" dis-hover>
          <div class="content">
            <img src="../assets/images/recruit/flootTitle-1.png" alt>
            <!-- 招生简章内容 -->
            <div class="form" id="form">
              <div class="corner" id="corner"></div>
              <div class="m-content">
                <p>“艺术托起梦想，梦想助力成长”， T11艺术中心从孩子的实际需求出发，满足孩子的个性化需求，让孩子们在艺术素质教育综合体的帮助下，健康快乐地成长，享受多彩的童年和美好的人生！
                  <br>随着父母对素质教育的重新认识及科技进步带来的教育手段和资源的变化，为教育行业的发展带来了新的契机。T11艺术中心的成立就是创建三位一体、全新时代、迎合政策的现代化少儿素质教育培训服务机构。
                  <br>线下服务机构之一是4000平米共享教室模式的 “少儿精品艺术素质教育综合体”，集结超过30余家资深少儿艺术培训机构，围绕3-16岁少儿的人格教育构建智力教育、艺术教育、亲子教育、体验教育、特色教育、人文教育（学前教育）等六大一站式文教培养服务体系，开设美术、口才、机器人、中国书画、瑜伽、陶艺、跆拳道、钢琴、中国舞、拉丁舞、街舞、模特、器乐、篮球等多种培训课程，基本涵盖了艺术、体育、科学、人文等素质教育的主要门类。同时为孩子们提供展示、交流、图书、竞技、休闲、游艺、餐饮、购物等主题服务空间
                </p>
              </div>
            </div>
          </div>
        </Card>
      </Col>
    </Row>
    <Row class="floorW">
      <Col>
        <Card :bordered="false" dis-hover>
          <div class="content">
            <img src="../assets/images/recruit/flootTitle-2.png" alt>
            <!-- 报名方式 -->
            <div class="bmfs">
              <Card :bordered="false" style="text-align:center" dis-hover>
                <img src="../assets/images/recruit/button-1.png" alt srcset>
                <p class="fS26">进校报名</p>
              </Card>
              <Card :bordered="false" style="text-align:center" dis-hover>
                <img src="../assets/images/recruit/button-2.png" alt srcset>
                <p class="fS26">电话报名</p>
              </Card>
              <Card :bordered="false" style="text-align:center" dis-hover>
                <img src="../assets/images/recruit/button-3.png" alt srcset>
                <p class="fS26">微信报名</p>
              </Card>
              <Card :bordered="false" style="text-align:center" dis-hover>
                <img src="../assets/images/recruit/button-4.png" alt srcset>
                <p class="fS26">APP报名</p>
              </Card>
              <Card :bordered="false" style="text-align:center" dis-hover>
                <img src="../assets/images/recruit/button-5.png" alt srcset>
                <p class="fS26">网上报名</p>
              </Card>
            </div>
          </div>
        </Card>
      </Col>
    </Row>
    <Row class="floorW">
      <Col>
        <Card :bordered="false" dis-hover>
          <div class="content">
            <img src="../assets/images/recruit/flootTitle-3.png" alt>
            <!-- 收费 -->
            <Row class="shoufei" :gutter="16">
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-1.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-1.png" alt>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-2.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-2.png" alt srcset>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-3.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-3.png" alt srcset>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-4.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-4.png" alt srcset>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-5.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-5.png" alt srcset>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-6.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-6.png" alt srcset>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-7.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-7.png" alt srcset>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-8.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-8.png" alt srcset>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-9.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-9.png" alt srcset>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-10.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-10.png" alt srcset>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-11.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-11.png" alt srcset>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-12.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-12.png" alt srcset>
                </div>
              </Col>
              <Col :lg="8">
                <div class="top">
                  <img src="../assets/images/recruit/shoufeiTitle-13.png" alt srcset>
                </div>
                <div class="content">
                  <img src="../assets/images/recruit/shoufeiContent-13.png" alt srcset>
                </div>
              </Col>
            </Row>
          </div>
        </Card>
      </Col>
    </Row>
    <Row class="floorW">
      <Col>
        <Card :bordered="false" dis-hover>
          <div class="content">
            <img src="../assets/images/recruit/flootTitle-4.png" alt>
            <Row type="flex" justify="center" style="margin-top:30px">
              <Col :lg="10">
                <Form :label-width="80">
                  <FormItem label="孩子姓名：">
                    <Input ></Input>
                  </FormItem>
                  <FormItem label="孩子年龄：">
                    <Input ></Input>
                  </FormItem>
                  <FormItem label="意向科目：">
                    <Input ></Input>
                  </FormItem>
                  <FormItem label="联系方式：">
                    <Input></Input>
                  </FormItem>
                  <FormItem label="家庭地址：">
                    <Input ></Input>
                  </FormItem>
                  <FormItem label="备　　注：">
                    <Input type="textarea"  :rows="5"></Input>
                  </FormItem>
                  <FormItem style="text-align:center">
                    <Button type="primary">提交</Button>
                  </FormItem>
                </Form>
              </Col>
            </Row>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
.recruit {
  background: url("../assets/images/recruit/bg.png") no-repeat;
  background-size: 100% 100%;
  .ivu-card {
    background: none;
  }
  .content {
    text-align: center;
    .form {
      background: #f19fc3;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 500px;
      margin: 30px auto;
      box-sizing: border-box;
      padding: 5%;
      .m-content {
        height: 100%;
        overflow: hidden;
        p {
          font-family: "Microsoft YaHei";
          text-align: left;
          text-indent: 36px;
          color: #fff;
          font-size: 20px;
          line-height: 40px;
        }
      }
    }
    .form:hover .corner {
      background: -webkit-linear-gradient(
        152deg,
        #fff 24%,
        #5f5f5f 40%,
        #6f6f6f 43%,
        #5f5f5f 46%,
        #fff 50%,
        #FFFAC7 50%,
      );
      background: -moz-linear-gradient(
        152deg,
        #fff 24%,
        #5f5f5f 40%,
        #6f6f6f 43%,
        #5f5f5f 46%,
        #fff 50%,
        #FFFAC7 50%,
      );
      height: 90px;
      background: -o-linear-gradient(
        152deg,
        #fff 24%,
        #5f5f5f 40%,
        #6f6f6f 43%,
        #5f5f5f 46%,
        #fff 50%,
        #FFFAC7 50%,
      );
      height: 90px;
      background: -ms-linear-gradient(
        152deg,
        #fff 24%,
        #5f5f5f 40%,
        #6f6f6f 43%,
        #5f5f5f 46%,
        #fff 50%,
        #FFFAC7 50%,
      );
      height: 90px;
      background: linear-gradient(
        152deg,
        #fff 24%,
        #5f5f5f 40%,
        #6f6f6f 43%,
        #5f5f5f 46%,
        #fff 50%,
        #FFFAC7 50%,
      );
      height: 90px;
      width: 170px;
      height: 90px;
      border-top-left-radius: 90px 90px;
      // -webkit-transform: rotate(-90deg);
      // -moz-transform: rotate(-90deg);
      // -o-transform: rotate(-90deg);
      // -ms-transform: rotate(-90deg);
      position: absolute;
      right: -4px;
      bottom: -4px;
      overflow: hidden;
      border: 1px solid #5f5f5f;
    }
    /* 报名方式 */
    .bmfs {
      margin: 30px;
      display: flex;
      justify-content: space-between;
      img {
        width: 200px;
        height: 200px;
        margin-bottom:20px; 
      }
    }
    /* 收费 */
    .shoufei {
      margin-top: 30px !important;
      .top {
        padding: 20px;
        text-align: center;
        img {
          height: 30px;
        }
      }
      .content {
        width: 100%;
        height: 170px;
        border: 3px solid #f08519;
        border-radius: 5px;
        padding: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>